<template>
  <view class="recharge-container">
    <view class="title">充值</view>
    <!-- 充值金额输入框 -->
    <input type="number" v-model="rechargeAmount" placeholder="请输入充值金额" />
    <!-- 充值方式选择 -->
    <view class="payment-method">
      <view class="method-item" v-for="(method, index) in paymentMethods" :key="index" @click="selectPaymentMethod(method)">
        {{method.name}}
      </view>
    </view>
    <!-- 确认充值按钮 -->
    <button @click="confirmRecharge">确认充值</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      rechargeAmount: 0,
      paymentMethods: [
        { name: '微信支付', type: 'wechat' },
        { name: '支付宝支付', type: 'alipay' }
      ],
      selectedPaymentMethod: null
    };
  },
  methods: {
    selectPaymentMethod(method) {
      this.selectedPaymentMethod = method;
    },
    confirmRecharge() {
      if (!this.selectedPaymentMethod) {
        console.log('请选择充值方式');
        return;
      }
      if (this.rechargeAmount <= 0) {
        console.log('请输入正确的充值金额');
        return;
      }
      console.log(`准备使用 ${this.selectedPaymentMethod.name} 充值 ${this.rechargeAmount} 元`);
    }
  }
};
</script>
<style>
.recharge-container {
  padding: 20px;
}
.title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}
input {
  width: 100%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  margin-bottom: 20px;
}
.payment-method {
  margin-bottom: 20px;
}
.method-item {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
}
button {
  width: 100%;
  height: 40px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}</style>